
.rui.grouptag {
  flex: 1 1 auto;
  // max-width: 20%;
  max-width: 200px;
  min-width: 150px;
  padding: 10px;

  @media screen and (max-width: @screen-xs-max) {
    max-width: 100%;
  }
}

.rui.tagnav.vertical .rui.grouptag {
  margin-bottom: 40px;
  max-width: 100%;
  padding: 0;
}

.rui.grouptag > .item {
  .flex(1 1 auto);
  min-width: 200px;
  width: 15%;
  max-width: 15%;
  padding: 10px;
}

.rui.grouptag > .header {
  border-bottom: 1px solid @border-color;
}

.rui.tagnav.vertical .rui.grouptag > .header {
  padding: 0 20px;
}

.rui.grouptag > .header .rui.tag {
  font-weight: 600;
  text-transform: uppercase;
}

.rui.tagnav.vertical .rui.grouptag > .header .rui.tag {
  // padding: 0 20px;
}


.rui.grouptag > .content {}

.rui.tagnav.vertical .rui.grouptag > .content {
  padding: 0 20px;
}

.rui.grouptag > .footer {}

.rui.grouptag > .header .rui.tag.edit,
.rui.grouptag > .header .rui.tag.edit.create {
  text-transform: none;

  input, button, .btn {
    // added !important here because of un-needed inline style that gets added
    // to react-autosuggest__container overriding the color. Couldn't find a better/faster approach
    background-color: @tag-group-background-color !important;
    border-color: @tag-group-border-color;
    color: @tag-group-text-color;
  }
}

.rui.grouptag > .header .rui.tag.edit input,
.rui.grouptag > .header .rui.tag.edit.create input {
  .placeholder(@tag-group-text-color);
}

.rui.grouptag > .content .rui.tag.link {
  text-transform: none;
}

.rui.tagnav.vertical .rui.grouptag > .content .rui.tag.link {
  .display(flex);
  .align-items(center);
  font-size: 1.3rem;
  padding: 3px 0;
}


.empty-tag-group {
  .display(flex);
  .flex-direction(column);
  .justify-content(center);
  .align-items(center);
  background-color: @black10;
  height: 120px;
  max-width: 300px;
}

.rui.tagnav.vertical .empty-tag-group {
  display: block;
}
